<template>
      <el-row type="flex" class="classNavigation" justify="center">
         <el-col :span="18" style="height:35px;">
            <div class="classify">
                <ul>
                    <li class="title">
                    <router-link :to="'/'"
                        ><span
                        style="border-bottom:4px   solid   #CC9756;color: #CC9756;"
                        >首页</span
                        >
                        <div class="show-warp"></div>
                    </router-link>
                    </li>
                    <li
                    class="item"
                    v-for="(item, index) in info.fastList"
                    :key="index"
                 
                    >
                    <div v-if="index<=8">
                      <span>{{ item.cate_name }}</span>
                      <div class="show-warp">
                          <!-- {{ item.cate_name }} -->
                          敬请期待
                      </div>
                  </div>
                    </li>
                </ul>
            </div>
      </el-col>
      </el-row>

</template>
<script> 
import { getHomeData } from "@api/public";

export default {
    name:"ClassNavigation",
    data:function(){
        return {
          info: {
            fastList: [],
            bastBanner: [],
            firstList: [],
            bastList: []
        },
        }
    },
    
    mounted: function() {
        let that = this;
        getHomeData().then(res => {
        that.$set(that, "info", res.data.info);
    });
    },
};
</script>
<style scoped>
.classNavigation {
    background-color: #fff;
    border-bottom:1px solid #DCDFE6;
}
.classNavigation .classify {
  margin: 0 auto;
  width: 1090px;
  height: 25px;
}

.classNavigation  .classify ul {
  height: 25px;
  position: relative;
}

.classNavigation .classify ul li {
  display: inline-block;
}
.classNavigation .classify ul li span {
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  line-height: 25px;
  font-weight: 700;
  margin: 0 26px;
  padding-bottom: 3px;
}

.classNavigation .classify ul li .title {
  height: 25px;
}
.classNavigation .classify ul li span:hover {
  border-bottom: 4px solid #cc9756;
  color: #cc9756;
}

.classNavigation .classify ul li .item {
  padding: 0 26px;
  padding-bottom: 7px;
}
 .classNavigation .show-warp {
  display: none;
  position: absolute;
  left: 0px;
  top: 35px;
  width: 1090px;
  height: 180px;
  background-color: #fff;
  border: 1px solid #ddd;
  z-index: 99999999;


  font-size: 20px;
  line-height: 180px;
  text-align: center;
  font-weight: 700;
}
.classNavigation .classify .item:hover .show-warp {
  display: block;
}
</style>